import styles from "../MainLayout/MainLayout.module.css";
import logoImg from '../../assets/logo.png'; 
import { useState, useEffect } from 'react';

const LogoTitle = ({ collapsed }) => {
  // 用于控制显示的状态（添加延迟）
  const [showTitle, setShowTitle] = useState(!collapsed);

  // 监听collapsed 变化，添加延迟
  useEffect(() => {
    // 当折叠时，立即隐藏；展开时，延迟100ms显示（可调整时间）
    const timer = setTimeout(() => {
      setShowTitle(!collapsed);
    }, collapsed ? 0 : 300);

    return () => clearTimeout(timer); // 清除定时器
  }, [collapsed]);

  return(
    <div
      style={{
        position: "sticky",
        top: "0px",
        paddingTop: "16px",
        background: "#001529",
        zIndex: 1000,
      }}
    >
      <div className={styles["demo-logo-vertical"]} style={{
        display: 'flex',
        alignItems: 'center' // 垂直居中对齐
      }}>
        <img 
          src={logoImg} 
          // src="../../../logo192.png"
          alt="logo图片" 
          width={30} 
          height={30} 
          style={{ marginLeft: 12 }}
        />
        
        {/* 带过渡动画的标题 */}
        {showTitle && (
          <p style={{
            color: '#fff',
            fontSize: 18,
            fontWeight: 'bold',
            paddingLeft: 8,
            margin: 0, // 清除默认margin
            transition: 'opacity 0.3s, transform 0.3s', // 平滑过渡
            opacity: !collapsed ? 1 : 0,
            transform: !collapsed ? 'translateX(0)' : 'translateX(-10px)'
          }}>
            月库管理中心
          </p>
        )}
      </div>
    </div>
  );
};

export default LogoTitle;
